<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>文档导航页面</title>
    <style>
        #doc-list {
            width: 700px;
            height: 300px;
            margin: auto;
            margin-top: 20px;
        }
        #doc-table {
            background-color: bisque;
            width: 700px;
            height: 276px;
            margin: auto;
            font-size: 10px;
            text-align: center
        }
        .doc-options {
            margin-left: 60px;
            margin-top: 20px;
        }
        .btn {
            float: left;
        }
        .doc-btn {
            width: 90px;
            height: 24px;
            margin-left: 5px;
            font-size: 10px;
            border-radius: 5px;
        }

    </style>
</head>
<body>
    <!--文档地址列表-->
    <div id="doc-list">
        <!--显示列表-->
        <div class="show-table">
            <table id="doc-table" border="1px solid #ccc" cellspacing="0" cellpadding="0">
                <tr class="doc-tr">
                    <td>文档编号</td>
                    <td>文档名称</td>
                    <td>文档地址</td>
                    <td>访问数量</td>
                </tr>
                <div th:each="document:${documentsList}">
                    <tr class="doc-tr">
                        <td th:text="${document.docId}" class="doc-id"></td>
                        <td th:text="${document.docName}"></td>
                        <!--每点击一次链接，文档的访问数量+1-->
                        <td><a th:href="${document.docUrl}" onclick="incr(this);" class="a-docUrl"><span th:text="${document.docUrl}" class="url-span"></span></a></td>
                        <td th:text="${document.visCount}"></td>
                    </tr>
                </div>
            </table>
        </div>
        <!--文档操作-->
        <div class="doc-options">
            <div id="refresh" class="btn">
                <input type="button" name="refresh-btn" class="doc-btn" value="更新页面" onclick="Refresh();">
            </div>
            <div id="add" class="btn">
                <input type="button" name="add-btn" class="doc-btn" value="添加文档" onclick="ForwardToDocAddPage();">
            </div>
            <div id="del" class="btn">
                <input type="button" name="del-btn" class="doc-btn" value="删除文档">
            </div>
            <div id="sort" class="btn">
                <input type="button" name="watch-btn" class="doc-btn" value="查看热门文档" onclick="WatchHotDocument();">
            </div>
            <div id="up" class="btn" style="margin-left: 10px">
                <input type="button" name="up-btn" value="上一页" onclick="upPage(this);">
            </div>
            <div id="down" class="btn">
                <input type="button" name="down-btn" value="下一页" onclick="downPage(this);">&nbsp;&nbsp;&nbsp;&nbsp;
            </div>
            <div id="doc-count" style="font-size: 8px;color: cadetblue">
                <span>一共</span><span th:text="${docCount}" class="docCounts"></span><span>条文档导航</span>
            </div>
        </div>
    </div>
</body>
<script>
    var offset = 8; // 常量，每页的偏移量
    <!--设置相关js脚本-->
    upPage = function(button) {
        // 判断是否已经在第一页
        var docIds = document.getElementsByClassName('doc-id'); // 获取当前页的所有docId
        if(parseInt(docIds[0].innerHTML) <= offset) {
            return; // 当前页的起始索引为1，说明为第一页
        }
        // 可以翻页
        var next_start = parseInt(docIds[0].innerHTML) - offset - 1; // 获取上一页的起始编号
        // 将起始索引编号和每页的偏移量作为参数发送给后台controller中
        window.location.href = 'http://localhost:9091/do-page/do-up-page?start=' + next_start + '&offset=' + offset;
    }

    downPage = function(button) {
        var docAllCounts = parseInt(document.getElementsByClassName('docCounts')[0].innerHTML); // 获取数据库中的文档条数的总数
        var docIds = document.getElementsByClassName('doc-id'); // 获取当前页的索引编号
        var currentPageLastId = parseInt(docIds[docIds.length - 1].innerHTML); // 获取当前页的最后一个文档id编号
        if(currentPageLastId >= docAllCounts) {
            return;
        }
        // 可以翻页
        var next_start = currentPageLastId + 1;
        window.location.href = 'http://localhost:9091/do-page/do-down-page?start=' + next_start + '&offset=' + offset;
    }

    <!--实现添加页面跳转-->
    ForwardToDocAddPage = function() {
        window.location.href = "http://localhost:9091/index/to-add-doc-page";
    }

    <!--实现热门文档的查看-->
    WatchHotDocument = function() {
        window.location.href = "http://localhost:9091/do-doc/get-hot-doc";
    }

    <!--点击a标签，自增文档的访问数量-->
    incr = function(a) {
        var docId; // 记录当前被访问的文档的索引编号
        var aList = document.getElementsByClassName('a-docUrl'); // 获取当前页面中的所有a标签
        for(var i = 0; i < aList.length; i++) {
            if(aList[i].href == a.href) {
                docId = i;
                break;
            }
        }
        docId = docId + 1; // 遍历索引是从0开始的，mysql中的索引从1开始，所以需要+1
        // 将当前访问的文档编号加到路径中，一起发送给controller层
        window.location.href = "http://localhost:9091/do-doc/do-doc-incr?docId=" + docId;
    }

    <!--刷新页面-->
    Refresh = function() {
        window.location.href = "http://localhost:9091/index/doc-nav-page";
    }
</script>
</html>